<template>
  <div class="add-quality-inspection-items-wrapper">
    <el-form label-width="108px" :model="form" ref="form">
      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>质检信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="质检人" prop="qualityInspectorId" width="360">
              <quality-inspector-member-select
                v-model="form.qualityInspectorId"
              ></quality-inspector-member-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="质检状态" prop="qualityInspectionStatus">
              <DictRadio
                v-model="form.qualityInspectionStatus"
                size="small"
                :radioData="dict.type.pms_quality_inspection_status"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="未通过原因" prop="reasonForFailure">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入未通过原因"
                v-model="form.reasonForFailure"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>感官指标</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="外观" prop="appearance" width="360">
              <template>
                <div class="inline-input-group">
                  <el-tooltip
                    content="完整度、颜色、气味"
                    placement="top-start"
                    popper-class="custom-tooltip"
                    ><i class="el-icon-question"></i
                  ></el-tooltip>
                  <el-input
                    v-model="form.appearance"
                    placeholder="请输入外观"
                    style="flex: 1"
                  ></el-input>
                </div>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="杂质含量" prop="impurityContent">
              <el-input
                placeholder="请输入杂质含量"
                v-model="form.impurityContent"
                type="number"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织形态" prop="morphology">
              <el-input
                v-model="form.morphology"
                placeholder="请输入组织形态"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>理化指标</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="水分含量" prop="moistureContent">
              <el-input
                placeholder="请输入水分含量"
                v-model="form.moistureContent"
                type="number"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="盐分含量" prop="saltContent">
              <el-input
                placeholder="请输入盐分含量（盐渍品）"
                v-model="form.saltContent"
                type="number"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="蛋白质含量" prop="proteinContent">
              <el-input
                placeholder="请输入蛋白质含量"
                v-model="form.proteinContent"
                type="number"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="灰分" prop="ashContent">
              <el-input
                placeholder="请输入灰分"
                v-model="form.ashContent"
                type="number"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="PH值" prop="ph">
              <el-input
                placeholder="请输入PH值"
                v-model="form.ph"
                type="number"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>安全指标</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="重金属" prop="heavyMetal">
              <el-input
                v-model="form.heavyMetal"
                placeholder="请输入重金属"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微生物" prop="microorganism">
              <template>
                <div class="inline-input-group">
                  <el-tooltip
                    content="菌落总数、大肠杆菌等"
                    placement="top-start"
                    popper-class="custom-tooltip"
                    ><i class="el-icon-question"></i
                  ></el-tooltip>
                  <el-input
                    v-model="form.microorganism"
                    placeholder="请输入微生物"
                    style="flex: 1"
                  ></el-input>
                </div>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="农药/兽药残留" prop="pesticideResidue">
              <el-input
                v-model="form.pesticideResidue"
                placeholder="请输入农药/兽药残留"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>标签标识</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生产日期" prop="dateOfManufacture">
              <template>
                <el-date-picker
                  v-model="form.dateOfManufacture"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :style="{ width: '100%' }"
                  placeholder="请选择日期"
                  clearable
                ></el-date-picker>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="过期日期" prop="expirationDate">
              <template>
                <el-date-picker
                  v-model="form.expirationDate"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :style="{ width: '100%' }"
                  placeholder="请选择日期"
                  clearable
                ></el-date-picker>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产地" prop="origin">
              <el-input
                v-model="form.origin"
                placeholder="请输入产地"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加工工艺" prop="processingTechnology">
              <el-input
                v-model="form.processingTechnology"
                placeholder="请输入加工工艺"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="添加剂" prop="additive">
              <template>
                <div class="inline-input-group">
                  <el-tooltip
                    content="如明矾等"
                    placement="top-start"
                    popper-class="custom-tooltip"
                    ><i class="el-icon-question"></i
                  ></el-tooltip>
                  <el-input
                    v-model="form.additive"
                    placeholder="请输入添加剂"
                    style="flex: 1"
                  ></el-input>
                </div>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>质检详情</span>
        </div>
        <Editor
          v-model="form.contents"
          placeholder="请输入内容"
          type="url"
        ></Editor>
      </el-card>
      <div class="tc">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  addPmsQualityInspectionItems,
  getPmsQualityInspectionItems,
  updatePmsQualityInspectionItems,
} from "@/api/pms/qualityInspectionItems";
import QualityInspectorMemberSelect from "@/views/components/QualityInspectorMemberSelect";
export default {
  name: "addQualityInspectionItems",
  dicts: ["pms_quality_inspection_status"],
  components: { QualityInspectorMemberSelect },
  data() {
    return {
      rules: {
        qualityInspectorId: [
          { required: true, message: "请选择质检人", trigger: "blur" },
        ],
      },
      form: {
        id: null,
        qualityInspectorId: null,
        qualityInspectionStatus: 0,
        reasonForFailure: "",
        appearance: "",
        impurityContent: "",
        morphology: "",
        moistureContent: "",
        saltContent: "",
        proteinContent: "",
        ashContent: "",
        ph: "",
        heavyMetal: "",
        microorganism: "",
        pesticideResidue: "",
        dateOfManufacture: "",
        expirationDate: "",
        origin: "",
        processingTechnology: "",
        additive: "",
        contents: "",
        pmsProductid: null,
      },
    };
  },
  created() {
    const { pmsProductId } = this.$route.query;
    this.form.pmsProductId = pmsProductId;
    if (pmsProductId) {
      this.getInfo(pmsProductId);
    }
  },
  methods: {
    getInfo(pmsProductId) {
      getPmsQualityInspectionItems(pmsProductId).then((response) => {
        if (response != null && response != "") {
          this.form = response;
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      if (this.form.id != null) {
        updatePmsQualityInspectionItems(this.form).then((response) => {
          this.$modal.msgSuccess("修改成功");
        });
      } else {
        addPmsQualityInspectionItems(this.form).then((response) => {
          this.$modal.msgSuccess("新增成功");
        });
      }
      this.cancel();
    },
    cancel() {
      this.$tab.closeOpenPage({ path: "/pms/product" });
    },
  },
};
</script>
<style scoped>
/* 问号图标样式 */
.el-icon-question {
  color: #409eff;
  cursor: pointer;
  margin-left: 1px;
}

/* 提示框黑底样式 */
.custom-tooltip {
  background: #000 !important;
  color: #fff !important;
  max-width: 150px;
  line-height: 1.5;
}

/* 提示框箭头样式 */
.custom-tooltip .popper__arrow {
  border-top-color: #000 !important;
}
.inline-input-group {
  display: flex;
  align-items: center;
}
.inline-input-group .el-icon-question {
  margin-right: 8px;
  color: #909399;
}
</style>
